import * as React from 'react'
import { connect } from 'react-redux';
import { getLogicQuiz, getLogicQuizSubmissionSummary } from '../../../actions/assignment';
import { Row, Col, Button } from 'antd/es';

class QuizSubmissionSummary extends React.Component<any> {
    componentDidMount = () => {
        const { quizId, selectedQuizzes } = this.props
        const quiz = selectedQuizzes[0]
        const { assignmentId } = quiz
        this.props.getLogicQuiz(quizId)
        this.props.getLogicQuizSubmissionSummary(assignmentId, quizId)
    }

    componentDidUpdate = () => {
        const { status } = this.props.logicQuizSubmissionSummary

        if (status === 'started') {
            this.updateRoute()
        }
    }

    updateRoute = () => {
        this.props.updateRouteData({
            type: 'ASSIGNMENT_DETAIL',
            params: { ...this.props, type: 'LOGIC_QUIZ_DETAIL' }
        })
    }

    isEmpty() {
        const { status } = this.props.logicQuizSubmissionSummary
        return status === 'empty'
    }

    isLoad() {
        const { status } = this.props.logicQuizSubmissionSummary
        return status !== undefined
    }

    render() {
        if (!this.isLoad()) {
            return <div />
        }
        if (this.isEmpty()) {
            const { logicQuiz } = this.props
            return <div style={{ fontSize: '1.2em', lineHeight: 2, margin: '5%' }}>
                <Row>
                    <Col span={3}><b>题目类型：</b></Col>
                    <Col span={20}>逻辑题</Col>
                </Row>
                <Row>
                    <Col span={3}><b>答题时长：</b></Col>
                    <Col span={20}>
                        <span style={{ color: 'red' }}>{logicQuiz.timeBoxInMinutes} </span>分钟
                    </Col>
                </Row>
                <Row>
                    <Col span={3}><b>温馨提示：</b></Col>
                    <Col span={21}>
                        <br />
                        <li> 在点击 <b>开始答题</b> 按钮之前请确保你有足够的时间完成该逻辑题，当点击 <b>开始答题</b> 后，系统将开始倒计时⌛️，在倒计时结束之前，时间不会暂停。倒计时结束后将禁止提交答案。Good Luck！</li>
                        <li> 如果在倒计时之前完成所有的题目，可以直接点击 <b>结束答题</b> 按钮提交。</li>
                    </Col>
                </Row>

                <Button type='primary' onClick={this.updateRoute}>开始答题</Button>
            </div>
        }
        return <Button onClick={this.updateRoute} />

    }
}

const mapStateToProps = ({ logicQuiz, logicQuizSubmissionSummary }: { logicQuiz: any, logicQuizSubmissionSummary: any }) => {
    return { logicQuiz, logicQuizSubmissionSummary }
}

const mapDispatchToProps = (dispatch: Function) => ({
    getLogicQuiz: (quizId: number) => dispatch(getLogicQuiz(quizId)),
    getLogicQuizSubmissionSummary: (assignmentId: number, quizId: number, callback: Function) => dispatch(getLogicQuizSubmissionSummary(assignmentId, quizId, callback))

})

export default connect(mapStateToProps, mapDispatchToProps)(QuizSubmissionSummary)